//导入React 组件
import React, { Component } from 'react';

//书写组件代码块

class Dom_two extends Component{
    // 定义属性
    constructor(){
        this.username={
            name:'张三',
            count:18
        }
    }
    //定义add为箭头函数
    add = ()=>{
        console.log("打印this",this)
        this.setState({
            count:this.username.count+1
        })
    }
    //
    render(){
        return(
            <div className='serach'>
                {/* 显示我们定义的属性 */}
                <h2 className="title">02.时间处理-更改this指向</h2>
                count:{this.username.count}
                {/* 点击事件 */}
                <button onClick={this.add.bind(this)}>使用bind 改变count的值</button>
                {/* 箭头函数点击事件 */}
                <button className="bbut" onClick={()=>this.add()}>使用箭头函数改变count的值</button>
                {/* 定义事件函数为箭头函数然后点击事件 */}
                <button className="but" onClick={this.add}>使用箭头函数的方式count+++</button>
            </div>
        )
    }
}
export default Dom_two